<template>
    <div class="container-certify">
        <div class="wrap">
            <el-button :icon="ArrowLeftBold" text @click="back">退出认证</el-button>
            <div class="certify-box">
                <div class="top">
                    <div class="title">欢迎认证 · <strong>个人认证</strong></div>
                    <div class="step">
                        <div class="step-item" :class="{ active: step == 1 }">
                            <div class="step-item-icon">1</div>
                            <div class="step-item-title">认证方式</div>
                        </div>
                        <div class="step-item" :class="{ active: step == 2 }">
                            <div class="step-item-icon">2</div>
                            <div class="step-item-title">完成认证</div>
                        </div>
                    </div>
                    <img src="../assets/enterprise/renzheng_icon.png" />
                </div>
                <div class="content">
                    <div class="inner">
                        <div class="tip" v-if="step < 2">
                            <img src="../assets/enterprise/renzheng_icon1.png" />
                            <span>您填写的信息仅用于完成本次认证，平台方不会留存或泄露，请放心填写。</span>
                        </div>
                        <el-form :model="form" ref="ruleFormRef" :rules="rules" :inline="true" label-width="100px"
                            v-if="step == 1">
                            <el-row :span="24">
                                <el-col :span="24">
                                    <el-form-item prop="auth_name" style="width: 100%;" label="姓名">
                                        <el-input v-model="form.auth_name" style="width: 100%;" placeholder="请输入" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item prop="sex" style="width: 100%;" label="性别">
                                        <el-radio-group v-model="form.sex">
                                            <el-radio :value="0">男</el-radio>
                                            <el-radio :value="1">女</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item prop="birthday" style="width: 100%;" label="出生日期">
                                        <el-date-picker v-model="form.birthday" type="date" placeholder="请选择"
                                            :default-value="new Date(1990, 9, 1)" value-format="YYYY-MM-DD"
                                            style=" width: 100%;" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item prop="province_id" style="width: 100%;" label="省">
                                        <el-select v-model="form.province_id" placeholder="请选择" style="width: 100%"
                                            @change="changeProvince">
                                            <el-option v-for="item in provinceList" :key="item.id" :label="item.name"
                                                :value="item.city_id" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item prop="city_id" style="width: 100%;" label="市">
                                        <el-select v-model="form.city_id" placeholder="请选择" style="width: 100%"
                                            @change="changeCity">
                                            <el-option v-for="item in cityList" :key="item.id" :label="item.name"
                                                :value="item.city_id" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item prop="area_id" style="width: 100%;" label="区">
                                        <el-select v-model="form.area_id" placeholder="请选择" style="width: 100%">
                                            <el-option v-for="item in areaList" :key="item.id" :label="item.name"
                                                :value="item.city_id" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item prop="address" style="width: 100%;" label="详细地址">
                                        <el-input v-model="form.address" style="width: 100%;" placeholder="请输入" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-form-item style="width: 100%;">
                                <el-button class="submit" @click="submitForm(ruleFormRef)" :loading="loading">
                                    确定
                                </el-button>
                            </el-form-item>
                        </el-form>
                        <div class="certify-success" v-if="step == 2">
                            <img src="../assets/enterprise/success.png">
                            <el-button class="submit" @click="back">
                                完成认证
                            </el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { getArea, userAuth } from '@/api/index';
import { useUserStore } from '@/store/user';
import { ArrowLeftBold } from '@element-plus/icons-vue';
import type { FormInstance } from 'element-plus';
import { computed, onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter()

type Area = {
    id: number
    name: string
    level: number
    parent_id: number,
    city_id: number
}

const ruleFormRef = ref<FormInstance>()
const rules = reactive({
    auth_name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
    birthday: [{ required: true, message: '请选择出生日期', trigger: 'blur' }],
    province_id: [{ required: true, message: '请选择省', trigger: 'change' }],
    city_id: [{ required: true, message: '请选择市', trigger: 'change' }],
    area_id: [{ required: true, message: '请选择区', trigger: 'change' }],
    address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }]
})
const loading = ref(false)
const form = reactive({
    auth_name: '',
    sex: 0,
    birthday: '',
    province_id: null,
    city_id: null,
    area_id: null,
    address: '',
    area: ''
})
const step = ref(1)
const areaData = ref<Area[]>([])
const provinceList = computed(() => {
    return areaData.value.filter(item => item.parent_id == 0)
})
const cityList = computed(() => {
    return areaData.value.filter(item => item.parent_id == form.province_id)
})
const areaList = computed(() => {
    return areaData.value.filter(item => item.parent_id == form.city_id)
})

const userStore = useUserStore()

const back = () => {
    router.replace({path: '/home'})
}

const changeProvince = () => {
    form.city_id = null
    form.area_id = null
}

const changeCity = () => {
    form.area_id = null
}

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            loading.value = true
            const province = areaData.value.find(item => item.city_id == form.province_id)
            const city = areaData.value.find(item => item.city_id == form.city_id)
            const area = areaData.value.find(item => item.city_id == form.area_id)
            const areaStr = `${province?.name ?? ''}, ${city?.name ?? ''}, ${area?.name ?? ''}`
            userAuth({
                auth_type: 2,
                auth_name: form.auth_name,
                sex: form.sex,
                birthday: form.birthday,
                province_id: form.province_id,
                city_id: form.city_id,
                area_id: form.area_id,
                address: form.address,
                area: areaStr
            }).then(res => {
                step.value = 2
                let userInfo = userStore.userInfo
                userInfo.auth_type = 2
                userInfo.auth_name = form.auth_name
                userInfo.sex = form.sex
                userInfo.birthday = form.birthday
                userInfo.province_id = form.province_id
                userInfo.city_id = form.city_id
                userInfo.area_id = form.area_id
                userInfo.address = form.address
                userStore.updateUserInfo(userInfo)
                loading.value = false
            }).catch(err => {
                loading.value = false
                console.log(err)
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

onMounted(() => {
    getArea().then(res => {
        areaData.value = res.data
    })
})

</script>
<style lang="scss" scoped>
.container-certify {
    width: 100%;
    height: calc(100vh - 96px);
    background: #f5f5f5;

    .wrap {
        width: 980px;
        margin: 0 auto;
        padding-top: 25px;

        .certify-box {
            margin-top: 20px;
            border-radius: 10px;
            background-color: #fff;
            overflow: hidden;

            .top {
                height: 132px;
                background-image: linear-gradient(#f3f9ff, #e6f1ff);
                position: relative;

                img {
                    width: 108px;
                    height: 116px;
                    position: absolute;
                    top: 15px;
                    right: 50px;
                }

                .title {
                    font-size: 20px;
                    color: #01509f;
                    text-align: center;
                    padding-top: 20px;

                    strong {
                        font-weight: 600;
                    }
                }

                .step {
                    display: flex;
                    justify-content: space-between;
                    width: 280px;
                    margin: 25px auto 0;

                    .step-item {
                        display: flex;
                        justify-content: center;
                        flex-direction: column;
                        align-items: center;
                        position: relative;
                        width: 90px;

                        &:nth-child(1)::after {
                            content: '';
                            position: absolute;
                            top: 8px;
                            right: -84px;
                            width: 66px;
                            height: 1px;
                            background-color: #dee2e6;
                        }

                        .step-item-icon {
                            font-size: 12px;
                            text-align: center;
                            width: 16px;
                            height: 16px;
                            line-height: 16px;
                            border-radius: 50%;
                            color: #9e9f9f;
                            border: solid 1px #9e9f9f;
                        }

                        .step-item-title {
                            font-size: 14px;
                            color: #666;
                            margin-top: 10px;
                        }

                        &.active {
                            .step-item-icon {
                                border-color: #77aeff;
                                color: #fff;
                                background-color: #77aeff;
                            }

                            .step-item-title {
                                color: #01509f;
                            }

                            &:nth-child(1)::after {
                                background-color: #77aeff;
                            }
                        }
                    }
                }
            }

            .content {
                padding: 25px 0 30px;
                max-height: calc(100vh - 400px);
                overflow: auto;

                .inner {
                    width: 567px;
                    margin: 0 auto;

                    .tip {
                        height: 38px;
                        display: flex;
                        align-items: center;
                        background-color: #f3f8fb;
                        border-radius: 5px;
                        margin-bottom: 30px;

                        img {
                            width: 12px;
                            height: 16px;
                            margin: 0 4px 0 12px;
                        }

                        span {
                            font-size: 12px;
                            color: #999;
                        }
                    }

                    .formitem {
                        width: 100%;
                        display: flex;
                        margin-bottom: 15px;

                        .label {
                            width: 136px;
                            text-align: right;
                            margin-right: 16px;
                            line-height: 20px;
                            font-size: 14px;
                            color: #666;
                            flex-shrink: 0;

                            span {
                                color: #f00;
                            }
                        }
                    }

                    .submit {
                        width: 200px;
                        height: 37px;
                        color: #fff;
                        background-color: #01509f;
                        margin: 25px auto 0;
                    }

                    .change {
                        font-size: 14px;
                        text-align: center;
                        margin-top: 10px;

                        span {
                            color: #01509f;
                            cursor: pointer;
                        }
                    }

                    .license {
                        width: 466px;
                        margin: 0 auto;
                        display: flex;
                        align-items: flex-end;

                        span {
                            font-size: 14px;
                            color: #666;
                            height: 178px;
                        }

                        .avatar-uploader {
                            width: 288px;
                            height: 178px;
                            margin: 0 16px;

                            .avatar {
                                width: 288px;
                                height: 178px;
                                display: block;
                            }

                            :deep(.el-upload) {
                                width: 286px;
                                height: 176px;
                                border: 1px dashed #ddd;
                                border-radius: 6px;
                                cursor: pointer;
                                position: relative;
                                overflow: hidden;
                                transition: var(--el-transition-duration-fast);
                            }

                            .el-upload:hover {
                                border-color: var(--el-color-primary);
                            }

                            .el-icon.avatar-uploader-icon {
                                font-size: 38px;
                                color: #ccc;
                                width: 288px;
                                height: 178px;
                                text-align: center;
                            }

                            .el-icon.is-loading {
                                animation: rotating 2s linear infinite;
                            }

                            @keyframes rotating {
                                from {
                                    transform: rotate(0deg);
                                }

                                to {
                                    transform: rotate(360deg);
                                }
                            }
                        }

                    }

                    .certify-success {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;

                        img {
                            width: 120px;
                            height: 87px;
                            margin: 50px 0 30px;
                        }

                        .submit {
                            width: 200px;
                            height: 37px;
                            color: #fff;
                            background-color: #01509f;
                            margin: 25px auto 0;
                        }
                    }

                }
            }
        }
    }
}
</style>